<!DOCTYPE html>
<html lang="en">


<!-- =============================================================================== -->
<!-- 头部开始 -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- 标题 -->
    <title>REGISTER</title>

    <!-- css -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <link href="../../static/css/app.css" rel="stylesheet">

    <!-- js -->
    <script src="../../static/js/jquery-2.2.4.min.js"></script>
    <script src="../../static/js/bootstrap.min.js"></script>
</head>
<!-- 头部结束 -->
<!-- =============================================================================== -->


<!-- =============================================================================== -->
<!-- 主体开始 -->
<body style="background-color: #1c2b36">

<div id="forget_board">
    <div class="row" style="margin-top: 10%;">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div id="forget_box">
                <p class="m-t"></p>
                <div>
                    <i class="glyphicon glyphicon-send" style="font-size: x-large; color: #1c2b36;"></i>
                    <span class="font-bold text-center" style="font-size: 28px; color: #1c2b36;padding-left: 10px;">用户注册</span>
                </div>

                <!-- 邮箱表单 -->
                <div class="row">
                    <div class="col-lg-12">
                        <form class="m-t" role="form" action="" id="registerdata">
                            <div class="form-group">
                                <input name="username" class="form-control" placeholder="注册用户名" required="">
                            </div>
                            <div class="form-group">
                                <input name="chinese_name" class="form-control" placeholder="真实姓名" required="">
                            </div>
                            <div class="form-group">
                                <input name="mobile" class="form-control" placeholder="手机号码" required="">
                            </div>
                            <div class="form-group">
                                <input name="password" class="form-control" placeholder="设置密码" required="">
                            </div>
                            <div class="form-group">
                                <input name="re_password" class="form-control" placeholder="重复密码" required="">
                            </div>
                        </form>
                            <button type="submit" class="btn btn-black block full-width m-b" id="register" style="color: white">注册</button>
                            <small>已有账户? | <a href="{% url 'users:login' %}" style="color: #003366;">现在登录</a></small>
                    </div>
                </div>
                <p class="m-t"></p>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<!-- 主体结束 -->
<!-- =============================================================================== -->
<script>
        $(function () {
            // 提交表单
            $('#register').on('click', function () {
                $.ajax({
                    cache: false,
                    type: "POST",
                    url: "{% url 'users:register' %}",
                    data: $('#registerdata').serialize(),
                    async: true,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (data) {
                        if (data.status == 'success') {
                            window.alert(data.msg);
                            window.location.href={% url 'users:login' %};
                        } else if (data.status == 'failed') {
                            window.alert(data.msg);
                        }
                    }
                });
            });
        })
    </script>

</html>